<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手动抠图功能</title>
    <style>
        canvas {
            border: 1px solid black;
        }
        .controls {
            margin-bottom: 10px;
        }
        .canvas-container {
            position: relative;
            display: inline-block;
        }
        img {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
        #leftCanvas{
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="controls">
        <label for="brushSize">画笔大小:</label>
        <input type="range" id="brushSize" min="1" max="50" value="10">
        <button id="smudgeTool">涂抹工具</button>
        <button id="eraseTool">擦除工具</button>
    </div>
    <div class="canvas-container">
        <img id="sourceImage" src="images/2.jpg" width="500" height="500" alt="source image">
        <canvas id="leftCanvas" width="500" height="500"></canvas>
    </div>
    <canvas id="rightCanvas" width="500" height="500"></canvas>

    <script>
        const leftCanvas = document.getElementById('leftCanvas');
        const leftCtx = leftCanvas.getContext('2d');
        const rightCanvas = document.getElementById('rightCanvas');
        const rightCtx = rightCanvas.getContext('2d');

        const brushSizeInput = document.getElementById('brushSize');
        const smudgeToolButton = document.getElementById('smudgeTool');
        const eraseToolButton = document.getElementById('eraseTool');

        const image = document.getElementById('sourceImage');

        let brushSize = parseInt(brushSizeInput.value, 10);
        let isSmudging = true;
        let isDrawing = false;

        image.onload = () => {
            rightCtx.drawImage(image, 0, 0, rightCanvas.width, rightCanvas.height);
        };

        leftCanvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            leftCtx.globalCompositeOperation = isSmudging ? 'source-over' : 'destination-out';
            draw(e);
        });

        leftCanvas.addEventListener('mousemove', draw);
        leftCanvas.addEventListener('mouseup', () => isDrawing = false);
        leftCanvas.addEventListener('mouseout', () => isDrawing = false);

        brushSizeInput.addEventListener('input', (e) => {
            brushSize = parseInt(e.target.value, 10);
        });

        smudgeToolButton.addEventListener('click', () => {
            isSmudging = true;
        });

        eraseToolButton.addEventListener('click', () => {
            isSmudging = false;
        });

        function draw(e) {
            if (!isDrawing) return;

            const rect = leftCanvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            leftCtx.beginPath();
            if (isSmudging) {
                leftCtx.fillStyle = 'black';
                leftCtx.arc(x, y, brushSize / 2, 0, Math.PI * 2);
                leftCtx.fill();
            } else {
                leftCtx.globalCompositeOperation = 'destination-out';
                leftCtx.arc(x, y, brushSize / 2, 0, Math.PI * 2);
                leftCtx.fill();
                leftCtx.globalCompositeOperation = 'source-over';
            }

            updatePreview();
        }

        function updatePreview() {
            rightCtx.clearRect(0, 0, rightCanvas.width, rightCanvas.height);
            rightCtx.drawImage(image, 0, 0, rightCanvas.width, rightCanvas.height);
            rightCtx.globalCompositeOperation = 'destination-in';
            rightCtx.drawImage(leftCanvas, 0, 0, rightCanvas.width, rightCanvas.height);
            rightCtx.globalCompositeOperation = 'source-over';
        }
    </script>
</body>
</html>
